<!DOCTYPE html>
<html lang="en">

    <head><title>Hugo建立个人博客 &ndash; UxiaoTag的博客</title>
<meta name="description" content="一个蒟蒻无比的萌新.">

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8"/>



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" />


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.1/css/academicons.min.css" integrity="sha512-b1ASx0WHgVFL5ZQhTgiPWX+68KjS38Jk87jg7pe+qC7q9YkEtFq0z7xCglv7qGIs/68d3mAp+StfC8WKC5SSAg==" crossorigin="anonymous" />


<link rel="stylesheet" href="https://juruoxiao.gitee.io/linux_work/css/palettes/base16-dark.css">
<link rel="stylesheet" href="https://juruoxiao.gitee.io/linux_work/css/risotto.css">
<link rel="stylesheet" href="https://juruoxiao.gitee.io/linux_work/css/custom.css">
</head>

    <body>
        <div class="page">

            <header class="page__header"><h1 class="page__logo"><a href="https://juruoxiao.gitee.io/linux_work" class="page__logo-inner">UxiaoTag的博客</a></h1>
<nav class="page__nav main-nav">
    <ul>
    
    
    <li class="main-nav__item"><a class="nav-main-item" href="https://juruoxiao.gitee.io/linux_work/about/" title="">About</a></li>
    
    <li class="main-nav__item"><a class="nav-main-item active" href="https://juruoxiao.gitee.io/linux_work/post/" title="Posts">Posts</a></li>
    
    </ul>
</nav>

</header>

            <section class="page__body">
    <header class="content__header">
        <h1>Hugo建立个人博客</h1>
    </header>
    <div class="content__body">
        <p>通过hugo编写Markdown生成静态网页，部署在gitee上</p>
<h2 id="hugo安装">Hugo安装</h2>
<p>具体参考hugo的<a href="https://www.gohugo.org/doc/overview/quickstart/">文档</a>，直接去相关的主页进行下载，为了方便编辑，我用的是windows免编译版本。(别问我为什么用windows，我用linux也是一样下编辑器来写的，一样开edge来测试，而且把文件都上传到git你想用什么就用什么，差别不大。)</p>
<p>如果是免编译版本记得要配置环境变量（不配置的话，调用起来比较麻烦，怎么配置就自己找找教程了）</p>
<h2 id="hugo创建第一个网页">Hugo创建第一个网页</h2>
<p>那么开始创建网页之前，建议先弄一个文件夹专门放这些东西。我是统一放在大作业文件下面的(如果你想方便部署，可以另外放)。</p>
<p>hugo创建页面（名字自己喜欢就好了）：</p>
<pre tabindex="0"><code>hugo new site code
</code></pre><p>创建完之后子目录大概有如下：</p>
<pre tabindex="0"><code>  ▸ archetypes/
  ▸ content/
  ▸ layouts/
  ▸ static/
    config.toml
</code></pre><p>然后就是创建文章了</p>
<pre tabindex="0"><code>hugo new /path/文件.md
</code></pre><p>用hugo创建有个好处，似乎可以自动生成类似：</p>
<pre tabindex="0"><code>+++
date = &#34;2015-10-25T08:36:54-07:00&#34;
draft = true
title = &#34;about&#34;

+++
正文
</code></pre><p><em>就不用自己手写了(我就是写完了才发现的)</em></p>
<p>然后就是hugo的大特点之一了：</p>
<h2 id="hugo安装主题">hugo安装主题</h2>
<p>在github或者<a href="https://themes.gohugo.io/">Complete List | Hugo Themes (gohugo.io)</a>找到你心仪的皮肤, cd theme目录进行下载</p>
<pre tabindex="0"><code>git clone https://git链接
</code></pre><p>在你想用的话可以通过更改其中的config.toml中的theme = &ldquo;&ldquo;进行使用，更多详细自己找其他博客。</p>
<h2 id="hugo本地运行和生成静态网页">hugo本地运行和生成静态网页</h2>
<p>本地运行的话，你运行：</p>
<pre tabindex="0"><code>hugo server
</code></pre><p>就可以运行了，至于你要生成的话，你只需要进行：</p>
<pre tabindex="0"><code>hugo
</code></pre><p>生成的静态网页会在public存在</p>
<h2 id="hugo部署在gitee或github">hugo部署在gitee或github</h2>
<p>这个也比较简单，首先，你需要保证你的public文件在gitee或者github上面。具体怎么用git，网上教程很多。</p>
<p>然后在config.toml将baseUrl改成自己的挂载网址，例如我的是http://juruoxiao.gitee.io/linux_work/</p>
<p>然后hugo生成将内容上传，开启giteePage(需要手持身份认证)，将页面内容路径指定为你public的路径，然后正常到这一步就结束了。</p>
<h4 id="然后我们聊一聊我遇到的俩个问题">然后我们聊一聊我遇到的俩个问题</h4>
<p>问题1：主题丢失，找不到该静态资源，主要baseUrl没填对导致静态资源css之类的丢失：具体可以参考gitee自己的<a href="https://gitee.com/help/articles/4136#article-header0">帮助</a>。也有不少博客谈论这个问题。</p>
<p>问题2：也是主题丢失，不过是https拦截了所以http的资源访问。很奇怪的问题，原因是https中请求http接口或引入http资源都会被直接blocked（阻止），浏览器默认此行为不安全，会拦截。</p>
<p>解决方法是在此文件加入</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">http-equiv</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Content-Security-Policy&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;upgrade-insecure-requests&#34;</span> /&gt;
</span></span></code></pre></div><p>原理是使用META标签强制将http请求转成https(SSL协议)请求。</p>
<p>参考这篇<a href="https://blog.csdn.net/forteenBrother/article/details/119610978">( 解决Mixed Content:the page at‘https://‘ was loaded over HTTPS,but requested an insecure resource ‘http_forteenBrother的博客-CSDN博客</a></p>
    </div>
    <footer class="content__footer"></footer>

            </section>

            <section class="page__aside">
                <div class="aside__about">
<div class="aside__about">
    <img class="about__logo" src="https://juruoxiao.gitee.io/linux_work/images/rice.svg" alt="Logo">
<h1 class="about__title">UxiaoTag</h1>
<p class="about__description">一个蒟蒻无比的萌新.</p>
</div>


<ul class="aside__social-links">
    
    <li>
        <a href="https://github.com/q2516631454" rel="me" aria-label="GitHub" title="GitHub"><i class="fa-brands fa-github" aria-hidden="true"></i></a>&nbsp;
    </li>
    
    <li>
        <a href="mailto:2516631454@qq.com" rel="me" aria-label="Email" title="Email"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a>&nbsp;
    </li>
    
</ul>





<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/sakana-widget@2.5.0/lib/sakana.min.css"
/>
<div id="sakana-widget"></div>
<script>
  function initSakanaWidget() {
    const takina = SakanaWidget.getCharacter('takina');
    takina.initialState = {
      ...takina.initialState,
      i: 0.01,
      d: 1,
    };
    SakanaWidget.registerCharacter('takina-slow', takina);
    new SakanaWidget({ character: 'takina-slow',controls:false}).mount('#sakana-widget');
  }
</script>
<script
  async
  onload="initSakanaWidget()"
  src="https://cdn.jsdelivr.net/npm/sakana-widget@2.5.0/lib/sakana.min.js"
></script>
</div>
                <hr>
                <div class="aside__content">
    <p>Hugo建立个人博客,通过使用hugo编写Markdown生成静态网页，部署在gitee上</p>
    
        <p>
            By UxiaoTag, 
            2022-12-06
        </p>
    

                </div>
            </section>

            <footer class="page__footer"><p>
    
    
    
    
    
    
      
    
      
    
    
    
</p>
<br /><br />
<p class="copyright">© 2021–2022 <a href="https://gitee.com/juruoxiao/linux_work">UxiaoTag</a></p>
<p class="advertisement">Powered by <a href="https://gohugo.io/">hugo</a> and <a href="https://github.com/joeroe/risotto">risotto</a>.</p>
</footer>

        </div>
    </body>

</html>
